<doc>

  https://www.makeapie.com/editor.html?c=xtWKI3jP7Q

</doc>
<template>
  <div>
    <div id="danzhu" style="width: 500px;height:400px;float: left;"></div>
  </div>
</template>
<script>
  import echarts from 'echarts'
  export default {

    data() {
      return {
        charts: '',
      }
    },

    mounted() {
      this.init("danzhu")
    },

    methods: {
      init(id) {
        this.charts = echarts.init(document.getElementById(id))

        var echartData = [
          { name: "电解锌", data: [6] },
          { name: "硅锰合金", data: [19] },
          { name: "磷酸氢钙", data: [11] },
          { name: "硫酸", data: [9] },
        ];


        var option = {
          backgroundColor: '#fff',
          grid: {
            containLabel: true,
            left: 20,
            right: -20,
            top: 0,
            bottom: 40,
          },
          tooltip: {
            show: false,
          },
          legend: {
            show: false,
          },
          xAxis: {
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
          },
          yAxis: {
            data: ["sss"],
            axisLabel: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
            },
          },
          color: [
            "#5292FD",
            "#3DBB33 ",
            "#FCAD2C",
            "#EF6B6E",
            "#7F6AAD",
            "#585247",
          ],
          series: [],
        }

        echartData.forEach((item, index) => {
          option.series.push({
            type: "bar",
            name: item.name,
            stack: "1",
            label: {
              normal: {
                show: true,
                position: [5, 5],
                formatter: `{value|${item.data}}\n\n{name|${item.name}}`,
                align: "left",
                textStyle: {
                  color: "#fff",
                  rich: {
                    name: {
                      fontSize: "12",
                      fontWeight: 500,
                      color: "gray",
                    },
                    value: {
                      fontSize: "18",
                      fontWeight: 500,
                      color: "#fff",
                    },
                  },
                },
              },
            },
            barWidth: 30,
            data: item.data,
            itemStyle: {
              normal: {
                barBorderRadius: [0],
              },
            },
          });
          if (index === 0) {
            option.series[index].itemStyle.normal.barBorderRadius = [
              5,
              0,
              0,
              5,
            ];
          } else if (index === echartData.length - 1) {
            option.series[index].itemStyle.normal.barBorderRadius = [
              0,
              5,
              5,
              0,
            ];
          } else {
            return;
          }
        });

        // 使用刚指定的配置项和数据显示图表。
        this.charts.setOption(option);
      }
    },

  }
</script>
<style scoped>

</style>